<template>
  <div class="card-cell"
       :class="{'last':last}">
    <div class="card-padding-warp" @click="onCellClick">
      <div class="cell-header">
        <div class="title">
<!--          <image class="image-icon-md icon-offset&#45;&#45;md mr-2"-->
<!--                 src="@/static/icons/icon-product-title.png"-->
<!--                 v-if="titleIcon"-->
<!--          ></image>-->
<!--          <slot name="title"></slot>-->
          <span class="emergency-tip ml-2"
                v-show="emergency">
            紧急插单
          </span>
        </div>

        <div class="state state-color" v-if="stateDisplay">
          <span :class="CardStateClass">{{ CardState }}</span>
        </div>
        <div class="state" v-if="!stateDisplay">
          <slot name="menu"></slot>
        </div>
      </div>

      <div class="cell-warp">
        <div class="cell-text-list">
          <slot></slot>
        </div>
        <slot name="info"></slot>
      </div>
    </div>

    <div :class="['cell-footer','footer-align__'+props.footerAlign]">
      <slot name="footer"></slot>
    </div>

  </div>
</template>

<script setup>
import {computed} from 'vue';

const emits = defineEmits(['cellClick'])

const props = defineProps({
  footer: {
    type: Boolean,
    default: false
  },
  footerAlign:{
    type:String,
    default:"center"
  },
  last: {
    type: Boolean,
    default: false
  },
  prod: {
    type: Boolean,
    default: false
  },
  manuf: {
    type: Boolean,
    default: false
  },
  emergency: {
    type: Boolean,
    default: false
  },
  stateDisplay: {
    type: Boolean,
    default: true,
  },
  state: {
    type: Number,
    default: -1
  },
  stateType: {
    type: Object,
    default: () => {
      return {}
    }
  },
  titleIcon: {
    type: Boolean,
    default: true
  }
});

const CardState = computed(() => {
  let {
    stateType
  } = props;
  const hasStateType = Object.entries(stateType).length;
  let o = {
    '-1': '未完成',
    0: '生产中',
    1: '已完成'
  }
  if (hasStateType) {
    o = stateType
  }

  let value = o[props.state]
  if (!value) {
     return o['-1']
  }
  return value
})

const CardStateClass = computed(() => {
  let o = {
    '-1': 'info',
    0: 'primary',
    1: 'success'
  }
  let value = o[props.state]
  if (!value) {
    return o['-1']
  }
  return value
})

const onCellClick = function () {
  emits('cellClick')
}
</script>

<style lang="scss"
       scoped>
.card-cell {
  border-bottom: #dddddd 1px dashed;

  &.last {
    border-bottom: none;
  }

  .card-padding-warp {
    padding: 18rpx 22rpx;
  }

  .cell-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    .title {

      .emergency-tip {
        border: 1px #fd6c6d solid;
        background-color: #fff0f0;
        color: #fd6c6d;
        padding: 3rpx 8px;
        border-radius: 7rpx;
        font-size: 26rpx;
      }
    }
  }

  .cell-warp {

    .cell-text-list {
      margin: 22rpx 0;
    }
  }

  .cell-footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-top: #dddddd 1px solid;
    padding: 12rpx 22rpx;

    &.footer-align{
      &__left{
        justify-content: flex-start !important;
      }

      &__right{
        justify-content: flex-end !important;
      }
    }
  }
}
</style>
